<template>
  <Panel>
    <template #title>
      <p>订单编辑</p>
    </template>
    <template #content>
      <div>
        <el-form
          :model="editData"
          status-icon
          ref="editForm"
          label-width="100px"
          class="demo-editData"
          size="mini"
        >
          <el-form-item label="订单ID" prop="id">
            <el-input v-model="editData.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="订单编号" prop="orderNo">
            <el-input v-model="editData.orderNo" disabled></el-input>
          </el-form-item>
          <el-form-item label="下单日期" prop="orderTime">
            <el-input v-model="editData.orderTime"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="editData.phone"></el-input>
          </el-form-item>
          <el-form-item label="收货人" prop="consignee">
            <el-input v-model="editData.consignee"></el-input>
          </el-form-item>
          <el-form-item label="配送地址" prop="deliverAddress">
            <el-input v-model="editData.deliverAddress"></el-input>
          </el-form-item>
          <el-form-item label="送达时间" prop="deliveryTime">
            <el-input v-model="editData.deliveryTime"></el-input>
          </el-form-item>
          <el-form-item label="订单金额" prop="orderAmount">
            <el-input v-model="editData.orderAmount"></el-input>
          </el-form-item>
          <el-form-item label="订单状态" prop="orderState">
            <el-input v-model="editData.orderState"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="editData.remarks"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('editForm')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </template>
  </Panel>
</template>

<script>
import { getOrderdetail, editOrder } from '../../api/order.js'
import moment from 'moment'

export default {
  data() {
    return {
      editData: {
        id: '',
        orderNo: '',
        orderTime: '',
        phone: '',
        consignee: '',
        deliverAddress: '',
        deliveryTime: '',
        remarks: '',
        orderAmount: '',
        orderState: ''
      },
      editid: this.$route.query.id
    }
  },
  created() {
    this.getOrder()
  },
  methods: {
    async getOrder() {
      const { data } = await getOrderdetail({
        id: this.editid
      })
      this.editData = data
      this.editData.orderTime = moment(data.orderTime).format(
        'YYYY-MM-DD HH:mm:ss'
      )
      this.editData.deliveryTime = moment(data.deliveryTime).format(
        'YYYY-MM-DD HH:mm:ss'
      )
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const data = await editOrder(this.editData)
          if (data.code === 0) {
            this.$message({
              message: data.msg,
              type: 'success'
            })
            this.$router.push('/order/list')
          } else {
            this.$message({
              message: data.msg,
              type: 'error'
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 50%;
}
</style>
